<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>HTML ＜input＞ required 属性</title> 
<style>
    #myForm{
        width: 300px;
        margin: 200px auto;
        text-align: center;
    }
    #myForm input{
        padding: 5px;
        border-radius: 5px;
        border: 1 solid #ccc;
        margin-bottom: 10px;
        width: 300px;
    }
</style>
</head>
<body>
    <!-- 这里我们可以在input里面加上required属性，
    在html5中，required是“必须”的意思，是指定标签中的一个属性；
    该属性是一个布尔属性，规定必须在提交之前填写输入的字段，
    若使用该属性，则字段是必填的，并且该属性是html5中新增的属性，
    语法为“<input required>”。
    可以配合pattern使用，用于验证表单输入的内容，通常HTML5的type属性，
    比如email、tel、number、data类、url等，已经自带了简单的数据格式验证功能了，
    加上pattern后，前端部分的验证更加简单高效了。 -->

    <form action="" method="get" id="myForm" name="myForm">
        <h1>用户注册</h1>
        <br>
        <input type="text" name="username" required="required" 
        pattern="^[a-zA-Z0-9_]{4,16}$" 
        placeholder="账号为4到16位（字母，数字，下划线）" 
        title="账号为4到16位（字母，数字，下划线）"/>
        <br>
        <input type="password" name="password1" required="required" 
        pattern="^[a-zA-Z0-9_]{6,16}$" 
        placeholder="请输入密码" 
        title="密码为4到16位（字母，数字，下划线）"/>
        <br>
        <input type="password" name="password2" required="required" 
        pattern="^[a-zA-Z0-9_]{6,16}$" 
        placeholder="请确认密码" 
        title="密码为4到16位（字母，数字，下划线）"/>
        <br>
        <input type="email" name="email" required="required" 
        placeholder="请输入邮箱" 
        pattern="^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+" 
        title="请输入有效的邮箱地址"/>
        <br>
        <input type="text" name="phone" required="required" 
        placeholder="请输入手机号" 
        pattern="^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$" 
        title="请输入正确的手机号"/>
        <br>
        <input type="submit" value="注册"/>
    </form>
    
</body>
</html>